<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./_reset.css" />
    <style>
      /* 最外边大盒子 */
      .all {
        width: 1000px;
        margin: 0 auto;
      }
      /* 底部蓝条 */
      .blue_top {
        width: 1000px;
        height: 16px;
        background-color: #6db6ff;
      }
      /* 导航栏 */
      .nav {
        width: 1000px;
        height: 120px;
        display: flex;
        /* justify-content: space-around; */
      }
      /* logo图 */
      .logo {
        margin: 34px 70px 15px 73px;
      }
      ul {
        list-style-type: none;
        display: flex;
        height: 20px;
        padding: 0;
        margin: 72px 0px 25px 0px;
      }
      li {
        width: 57px;
        height: 15px;
        font-size: 14px;
        margin-right: 18px;
      }
      li:nth-child(1) {
        width: 28px;
        height: 15px;
        margin-right: 14px;
      }
      /* 搜索框 */
      .nav input {
        margin: 65px 76px 17px 48px;
        width: 216px;
        height: 30px;
        padding: 0;
      }
      /* 顶部图片框 */
      .top {
        background-image: url("./img/ee7314461b78d4f3723ea4254019fcca.png");
        width: 1000px;
        height: 400px;
      }
      .zhuanrang {
        /* width: 92px;
        height: 28px; */
        margin: 0 auto;
        margin-top: 51px;
        text-align: center;
        /* border: olivedrab solid; */
        position: relative;
      }
      .zhuanrang p:nth-child(1) {
        font-family: MicrosoftYaHei-Bold;
        font-size: 14px;
        letter-spacing: 9px;
        margin-bottom: 6px;
      }
      .zhuanrang p:nth-child(2) {
        font-family: Arial-BoldMT;
        font-size: 9px;
        letter-spacing: -1px;
      }
      /* 伪类选择器 */
      .zhuanrang::before {
        content: "";
        display: block;
        border: 0.5px solid #9ac1c0;
        width: 105px;
        position: absolute;
        left: 317px;
        top: 15px;
      }
      .zhuanrang::after {
        content: "";
        display: block;
        border: 0.5px solid #9ac1c0;
        width: 105px;
        left: 571px;
        top: 15px;
        position: absolute;
      }
      .login button {
        border: none;
      }
      /* 登录盒子 */
      .login {
        width: 860px;
        margin: 0 auto;
        line-height: 40px;
        display: flex;
        justify-content: space-around;
        margin-top: 75px;
      }
      /* 左边的登录框 */
      .login_left input {
        background-color: #b3d9ff;
      }
      /* 底部 */
      .bottom {
        /* background-color: lightgreen; */
        margin: 0 auto;
        width: 1000px;
        text-align: left;
        position: relative;
      }
      /* 底部图片 */
      .bottom img {
        position: absolute;
        top: 30px;
        left: 400px;
      }
      /* 底部蓝条 */
      .blue_block {
        width: 1000px;
        height: 70px;
        background-color: #6db6ff;
        position: absolute;
        top: 150px;
      }
      /* 底部之前 */
      .bottom::before {
        content: "";
        display: block;
        border: 0.5px solid #6db6ff;
        width: 1000px;
        margin: 40px 0 30px;
      }
      th {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="all">
      <div class="blue_top"></div>
      <div class="nav">
        <div class="logo"><img src="./img/logo.png" alt="" /></div>
        <ul>
          <li>首页</li>
          <li>鼎搜投资</li>
          <li>鼎搜服务</li>
          <li>鼎搜动态</li>
          <li>鼎搜诚聘</li>
          <li>鼎搜公益</li>
        </ul>
        <input type="text" />
      </div>
      <div class="top"></div>
      <div class="zhuanrang">
        <p>我要转让</p>
        <p>WOYAOZHUANRANG</p>
      </div>
      <div class="login">
        <div class="login_left">
          <button
            style="background-color: #6db6ff; width: 80px; margin-left: 50px"
          >
            点击登录
          </button>
          <button style="width: 80px">点击注册</button>
          <table>
            <tr>
              <td>用户名:</td>
              <td><input type="text" /></td>
            </tr>
            <tr>
              <td>密码:</td>
              <td><input type="password" /></td>
            </tr>
            <tr>
              <td>验证码:</td>
              <td>
                <input type="text" style="width: 80px" />
              </td>
              <td><img src="./img/验证码.png" alt="" /></td>
              <td><span>看不清？</span></td>
              <td><span style="color: red">点击更换</span></td>
            </tr>
          </table>
          有效期
          <input type="radio" name="day" checked />一个月
          <input type="radio" name="day" />一周
          <input type="radio" name="day" />一天
          <input type="radio" name="day" />即时
          <br />
          <button
            style="
              background-color: #6db6ff;
              width: 80px;
              color: white;
              margin-left: 50px;
            "
          >
            登录
          </button>
          <span style="color: red">忘记密码?</span>
        </div>
        <div><img src="./img/regis.png" alt="" /></div>
      </div>
      <div class="bottom">
        <table height="120" width="680">
          <tr>
            <th>简介</th>
            <th>帮助</th>
            <th>共赢</th>
            <th>导航</th>
          </tr>
          <tr>
            <td>鼎搜网简介</td>
            <td>用户注册</td>
            <td>网站合作</td>
            <td>地图首页</td>
          </tr>
          <tr>
            <td>鼎搜服务</td>
            <td>关于鼎搜</td>
            <td>用户协议</td>
            <td>职能分类</td>
          </tr>
          <tr>
            <td>会员身份实名认证</td>
            <td>在线咨询</td>
            <td>会员身份实名认证</td>
            <td>企业名录</td>
          </tr>
        </table>
        <div class="blue_block"></div>
        <img src="./img/订阅信息.png" alt="" />
      </div>
    </div>
  </body>
</html>
